<template>
  <div class="vistor">
    <VistorHead :title="data.title"></VistorHead>

    <div class="vistor_content_box">

      <section class="first_nav_box">
        <div class="first_nav">
          <span v-for="(one,index) in data.firstNav" @click="click(index)">{{one.name}}</span>
        </div>
      </section>

      <section>
        <VistorBody></VistorBody>
      </section>

      <section class="registration">
        <VistorFoot index='0'></VistorFoot>
      </section>

    </div>
  </div>
</template>

<script>
  import { resetParent, animation } from '../../../assets/js/methods.js'
  import VistorHead from './Common/VistorHead'
  import VistorFoot from './Common/VistorFoot'
  import VistorBody from './Common/VistorBody'
  export default {
    name: '',
    data() {
      return {
        data: {
          title: '游客',  //标题
          firstNav: [     //一级导航
            {
              name: '游戏',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '明星',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '豪车',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '靓女',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '美食',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '科技',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '奇闻',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '书香',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '地理',
              content: {
                img: null,
                details: 5
              }
            }, {
              name: '影音',
              content: {
                img: null,
                details: 5
              }
            }
          ],
          visitorInfo: {
            showloading: false,
            tip: '正在加载',
            canScroll: true,
          }
        }
      }
    },
    components: {
      VistorFoot,
      VistorBody,
      VistorHead
    },
    methods: {
      
      click(index) {

      }
    },
    mounted() {
      resetParent(".first_nav", ".first_nav span")
      animation(this, '.details_content_box', '45', 1000, 400)

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .vistor {
    overflow: hidden;
  }
  
  .first_nav_box {
    width: 100%;
    overflow-x: auto;
  }

  .first_nav {
    display: 'flex';
    justify-content: space-between;
    height: 20px;
    box-shadow: 1px 0px 3px .1px black;
  }

  .first_nav span {
    padding: 0 5px;
    display: inline-block;
    width: 50px;
    flex-grow: 1;
  }

  .first_nav_box::-webkit-scrollbar,
  .details_content_box::-webkit-scrollbar {
    display: none;
  }

  .details_content_box {
    overflow-y: auto;
    position: absolute;
    top: 56px;
    bottom: 33px;
    width: 100%;
    transition: all 0.6s;
    background-color: white;
    padding-top: 30px;
  }

  .registration {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    /* box-shadow: -1px 0px 2px .1px black; */
  }
  
</style>